import React, { useState } from 'react';
import { Button, message } from "antd";
import TableRender from '@/components/TableRender';
import BindWarehouseModal from './BindWarehouseModal';
import { getUnBingOp, delBingWarehouseOp } from '../service'

//找家纺面单table
const ZjfTableList = ({ data = [], headerHeight, handleUpdateTable }) => {

  const [warehouseList, setList] = useState([]);//仓库
  const [expressId, setId] = useState('');//操作的快递

  const columns = [
    {
      name: "序号",
      code: "index",
      width: 90,
      render: (t, r, i) => i + 1
    },
    {
      name: "快递公司",
      code: "expressName",
      width: 150,
    },
    {
      name: "可用仓库",
      code: "warehouses",
      width: 500,
      render: (text, { expressId }) => {
        if (text) {
          return (
            <div>
              {text?.map(item => {
                const { id, warehouseName } = item
                return (
                  <span key={id}>
                    <Button style={{ marginRight: '12px' }}>{warehouseName} &nbsp;&nbsp;
                      <span onClick={() => delBingWarehouse(id)}>X</span>
                    </Button>
                  </span>
                )
              })}
              {text.length != 1200 && <Button onClick={() => getUnBing(expressId)} key='cancel'>添加仓库</Button>}
            </div>
          )
        }
      }
    },
  ];

  // 获取未绑定的
  const getUnBing = async (expressId) => {
    START_LOADING();
    const { success, data = [] } = await getUnBingOp({ expressId });
    if (success) {
      if (data.length) {
        setId(expressId)
        setList(data)
      } else {
        message.info('暂无可绑定的仓库')
      }
    }
    END_LOADING();
  }

  //解绑
  const delBingWarehouse = async (id) => {
    START_LOADING();
    const { success, msg } = await delBingWarehouseOp(id);
    if (success) {
      handleUpdateTable()
      message.success(msg)
    }
    END_LOADING();
  }

  //表格组件
  const TableRenderProps = {
    data,
    columns,
    style: {
      height: `calc(100vh - ${headerHeight + 192}px)`
    },
    pageConfig: {
      showPage: false,
    }
  }

  //添加绑定
  const AddWarehouseModalProps = {
    visible: warehouseList.length,
    expressId,
    warehouseList,
    handleOk() {
      handleUpdateTable();//更新table
    },
    handleCancel() {
      setId('')
      setList([]);
    }
  }

  return (
    <>
      <TableRender {...TableRenderProps} />
      <BindWarehouseModal {...AddWarehouseModalProps} />
    </>
  )
};

export default ZjfTableList;
